<template>
<<<<<<< HEAD
	<view class="content">
		<view class="box">
			<image class="bg" src="../../static/img/zc.jpg" mode=""></image>
			<view class="fudong">
				<text class="guize">众筹规则：筹资项目必须在发起人预设的时间内达到或超过目标金额才算成功。在设定天数内，达到或者超过目标金额，项目即成功。发起人可获得资金。</text>
				<view class="btn">
					<text class="jin">￥{{money}}</text>
					<text class="go">去众筹</text>
				</view>
			</view>
=======
	<view class="big-box">
		<view>
			<image class="banner" src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1601689912&t=0a98ffecd4bf61179e99615cf25d089f" mode=""></image>
>>>>>>> 9708773714269d4da6998fe9969c5d2629243308
		</view>
		<view class="content">
			
			<view class="class-info-box">
				<view class="class-name">
					{{data.className}}
				</view>
				<view class="price-box">
					<text>￥</text>
					<text>{{data.cost02}}</text>
					<text>￥{{data.cost01}}</text>
					<image class="more" src="../../static/img/1.png" mode=""></image>
				</view>
				<view class="icon-item">
					<image class="icon" src="../../static/img/2.png" mode=""></image>
					<text>{{data.sourceName}}</text>
				</view>
				<view class="icon-item" v-if="data.layClassList.length != 0">
					<image class="icon" src="../../static/img/3.png" mode=""></image>
					<view class="date-box">
						<view class="" v-for="(item, index) in data.layClassList" :key="index">
							{{item.startTime}}-{{item.endTime}}({{item.teachUserName}})
						</view>
					</view>
				</view>
				<!-- <view class="icon-item">
					<image class="icon" src="../../static/img/4.png" mode=""></image>
					<text>郑州经开广场</text>
				</view> -->
				<!-- <view class="icon-item2">
					<text>19191人已报名</text>
					<text>|</text>
					<text>1233人已浏览</text>
				</view> -->
			</view>
			<view class="title">
				课程详情
			</view>
			<view class="calss-detail" v-html="data.detail">
				<view class="">
					阿斯顿发士大夫撒地方是的发生的的双方各大范甘迪是的法国奢发个阿达是的广泛而是
				</view>
				<view class="">
					撒地方撒地方施工方官方回复的国际化发个黄金分割撒的发射峰污染物而大股东大风歌水电费干啥的风格和豆腐干
				</view>
				<img src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1601694178&t=adf22e1999d379e2763bfeff97effedf"></image>
				<!-- <image src="https://t7.baidu.com/it/u=3204887199,3790688592&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1601694178&t=adf22e1999d379e2763bfeff97effedf" mode=""></image> -->
			</view>
			<view class="title">
				课时
			</view>
			<view class="keshi-box" v-if="data.classHourList.length != 0">
				<view class="keshi-item" v-for="(item, index) in data.classHourList" :key="index"> 
					<image src="../../static/img/6.png" mode=""></image>
					<text>{{item.classHourName}}</text>
				</view>
		
			</view>
			<view class="title">
				讲师
			</view>
			<view class="jiangshi-box" v-if="data.teachList.legth != 0">
				<view class="jiangshi-item" v-for="(item, index) in data.teachList" :key="index">
					<image class="head" :src="item.img" mode=""></image>
					<view class="jiangshi-name">
						<view class="">
							{{item.userName}}
						</view>
						<view class="" v-if="item.starLevel == 1">
							<image src="../../static/img/5.png" mode=""></image>
						</view>
						<view class="" v-if="item.starLevel == 2">
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
						</view>
						<view class="" v-if="item.starLevel == 3">
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
						</view>
						<view class="" v-if="item.starLevel == 4">
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
						</view>
						<view class="" v-if="item.starLevel == 5">
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
							<image src="../../static/img/5.png" mode=""></image>
						</view>
					</view>
					<image class="back" src="../../static/img/7.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="title1">
				<view class="">
					学员感言
				</view>
				<view class="check-more">
					<text>查看更多</text>
					<image src="../../static/img/7.png" mode=""></image>
				</view>
			</view> -->
			
		<!-- 	<view class="ganyan-box">
				<view class="ganyan-item">
					<image class="head1" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2871119264,233376496&fm=26&gp=0.jpg" mode=""></image>
					<view class="ganyan-detail">
						<view class="ganyan-date">
							<text>站山峰</text>
							<text>2020.9.26 11:30:24</text>
						</view>
						<view class="ganyan-cont">
							我是感言内容我是感言内容我是感言内容我是感言内容我是感言内容我是感言内容我是感言内容
						</view>
						<view class="line">
							
						</view>
						<view class="huifu-box">
							<view class="huifu-data">
								<view class="box1">
									<image class="head" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2871119264,233376496&fm=26&gp=0.jpg" mode=""></image>
									<text>回复</text>
								</view>
								<text class="date">2020.9.26 11:30:24</text>
							</view>
							<view class="huifu-cont">
								我是回复内容我是回复内容我是回复内容我是回复内容我是回复内容我是回复内容
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="footer">
				
					<image src="../../static/img/8.png" mode=""></image>
					<image src="../../static/img/9.png" mode=""></image>
					<image src="../../static/img/10.png" mode=""></image>
				
				<view class="btn">
					进入主流程
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
<<<<<<< HEAD
export default {
	data() {
		return {
			money:"6000"
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style lang="scss">
.bg {
	vertical-align: middle;
	width: 100vw;
	height:calc(100vh - 44px);
}
.box{
	position: relative;
	.fudong{
		width: 500rpx;
		position: absolute;
		top: 38%;
		left: 50%;
		margin-left: -250rpx;
		.guize{
			color: #FFFFFF;
		}
		.btn{
			width: 300rpx;
			height: 70rpx;
			background-color: #FFFFFF;
			border-radius: 300rpx;
			text-align: center;
			line-height: 70rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.jin{
				color: #5348D2;
				font-weight: bold;
				margin-right: 20rpx;
			}
			.go{
				color: #574DC8;
			}
		}
=======
	const app = getApp()
	import {request} from '../../static/utils/api.js'
	export default {
		data() {
			return {
				data: {
					layClassList: [],
					classHourList: [],
					teachList: []
				}
			}
		},
		onLoad() {
			console.log(app.globalData);
			request({
				url: '/api/fanStuProcess/classDetail',
				method: 'post',
				data: {
					userId: '16e677470fe24e3c89391db8ba8a2f34',	
					classId: '65427819d67d48ada14ac9dc187c1687',
					layId: '5aba829e980f48b6bd28ba1ac97320b0',
					classType: '2'
				}	
			}).then(res => {
				console.log(res);	
				res.data.detail = res.data.detail.replace(/<img/g, '<img style="max-width: 100%; border-radius: 0 0 15px 15px;"')
				this.data = res.data
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7fb;
	}
	.content {
		position: relative;
		top: -60rpx;
		padding: 0 30rpx 70rpx;
	}
	.class-info-box {
		background-color: #FFFFFF;
		// width: 700rpx;
		// margin: 0 auto;
		padding: 30rpx 20rpx;
		border-radius: 30rpx;
		.class-name {
			font-size: 40rpx;
			color: #000;
		}
	}
	.banner {
		width: 100%;
	}
	.price-box {
		display: flex;
		align-items: center;
		
		text:nth-of-type(1) {
			font-size: 12px;
			color: #6684fc;
			
		}
		text:nth-of-type(2) {
			font-size: 18px;
			color: #6684fc;
		}
		text:nth-of-type(3) {
			font-size: 14px;
			color: #666;
			text-decoration: line-through;
			margin: 0 10rpx;
		}
		.more {
			width: 40rpx;
			height: 40rpx;
		}
		
		
	}
	.icon-item {
		display: flex;
		margin: 10rpx 0;
	}
	.icon {
		width: 30rpx;
		height: 30rpx;
		margin-top: 6rpx;
		margin-right: 20rpx;
	}
	.date-box {
		
		width: 650rpx;
	}
	.icon-item2 {
		display: flex;
		color: #999999;
		justify-content: flex-end;
		font-size: 24rpx;
		margin: 20rpx 0;
	}
	.title {
		font-size: 40rpx;
		color: #333;
		margin: 30rpx 0;
	}
	.calss-detail {
		border-radius: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		view {
			font-size: 30rpx;
			color: #999;
			text-indent: 2em;
			line-height: 45rpx;
		}
		image {
			width: 100%;
			border-radius: 0 0 30rpx 30rpx;
		}
		img {
			width: 400rpx;
			border-radius: 0 0 30rpx 30rpx;
		}
	}
	.keshi-item {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		image {
			width: 30rpx;
			height: 30rpx;
			
			margin-right: 20rpx;
		}
	}
	.jiangshi-item {
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		.head {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		.jiangshi-name {
			
			width: 500rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				margin-top: 10rpx;
			}
		}
		.back {
			width: 20rpx;
			height: 30rpx;
		}
	}
	.title1 {
		font-size: 40rpx;
		color: #333;
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.check-more {
			font-size: 26rpx;
			color: #666;
			image {
				width: 16rpx;
				height: 20rpx;
				vertical-align: middle;
				margin-left: 20rpx;
			}
		}
	}
	.ganyan-item {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.head1 {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
		.ganyan-detail {
			width: 530rpx;
			.ganyan-date {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				text:nth-of-type(1) {
					font-size: 32rpx;
				}
				text:nth-of-type(2) {
					font-size: 26rpx;
					color: #999;
				}
			}
			.ganyan-cont {
				color: #999;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.line {
				background-color: #f6f6f6;
				height: 1px;
				margin: 30rpx 0;
			}
			.huifu-box {
				.huifu-data {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					.box1 {
						display: flex;
						align-items: center;
						.head {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						text {
							color: #888;
						}
					}
					
					.date {
						font-size: 26rpx;
						color: #999;
					}
				}
				.huifu-cont {
					color: #999;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				
			}
		}
	}
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		
		width: 100vw;
		height: 100rpx;
		background-color: #fff;
		image {
			width: 60rpx;
			height: 60rpx;
			margin-left: 30rpx;
		}
		.btn {
			width: 300rpx;
			height: 70rpx;
			background-color: #6684fc;
			border-radius: 300rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			margin-left: 150rpx;
		}
			
>>>>>>> 9708773714269d4da6998fe9969c5d2629243308
	}
}
</style>
